<!--
 * @Author: zhayang
 * @LastEditors: zhayang 1063975710@qq.com
 * @Date: 2024-06-14 22:46:18
 * @LastEditTime: 2024-06-16 22:43:41
 * @Description: TODO:输入功能描述
-->
<template>
  <!-- echarts图表 -->
  <div
    ref="myChart"
    style="width: 100%; height: 100%"
  ></div>
</template>
<script>
export default {
  name: 'EchartsLine',
  props: {
    echartsData: {
      type: Object,
      default: () => {
        return {
          title: {
            show: false,
            name: 'title'
          },
          xAxis: {
            name: '',
            data: ['1', '2', '3', '4']
          },
          yAxis: [{ name: '', unit: 'mg/l' }],
          colorList: ['#00AAFF', '#00FFFF', '#00AAFF', '#00AAFF'],
          series: [
            [
              { name: '一级报警', value: 53 },
              { name: '一级报警', value: 35 },
              { name: '一级报警', value: 25 }
            ],
            [
              { name: '二级报警', value: 100 },
              { name: '二级报警', value: 200 },
              { name: '二级报警', value: 300 }
            ]
          ]
        }
      }
    },
    grid: {
      type: Object,
      default: function () {
        return {
          top: '40',
          left: '0',
          right: '70',
          bottom: '0',
          containLabel: true
        }
      }
    },
    lineArea: {
      type: Array,
      default: function () {
        return [true, true, true, true, true, true]
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    echartsData: {
      handler() {
        this.$nextTick(() => {
          this.init()
        })
      },
      deep: true,
      immediate: true
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.init()
    })
    // 窗口监听变化
    window.addEventListener('resize', this.resize)
  },

  beforeDestroy() {
    if (!!this._chart && this._chart !== null) {
      this._chart.dispose() // 销毁echarts实例
      window.removeEventListener('resize', this.resize) // 移除尺寸变化事件
      this._chart = null
    }
  },

  methods: {
    // 初始化图表
    init() {
      this._chart = this.$echarts.init(this.$refs.myChart)
      const option = {
        title: {
          show: this.echartsData.title.show,
          text: this.echartsData.title.name,
          textStyle: {
            fontSize: 16,
            fontFamily: 'PingFang SC',
            fontWeight: 500,
            color: '#F4BB76'
          },
          left: 'center',
          top: 0
        },
        legend: {
          show: !!this.echartsData?.legend?.show,
          type: 'plain',
          left: 'right',
          top: 5,
          itemWidth: 12,
          itemHeight: 7,
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: this.grid,
        xAxis: [
          {
            name: this.echartsData.xAxis.name,
            nameTextStyle: {
              color: '#fff',
              fontSize: '10px',
              padding: [0, 0]
            },
            boundaryGap: true,
            type: 'category',
            data: this.echartsData.xAxis.data,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              color: '#333'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#e0e0e0'
              }
            }
          }
        ],
        yAxis: [],
        series: []
      }
      option.yAxis = []
      for (let i = 0; i < this.echartsData.yAxis.length; i++) {
        const yData = this.echartsData.yAxis[i]
        option.yAxis.push({
          name: yData.name + yData.unit,
          nameLocation: 'end',
          nameTextStyle: {
            color: 'rgba(110, 206, 254, 1)',
            fontSize: '13px'
          },
          type: 'value',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#e0e0e0'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e0e0e0',
              type: 'dashed'
            }
          },
          axisLabel: {
            color: '#000',
            formatter: '{value}'
          }
        })
      }
      option.series = []
      for (let i = 0; i < this.echartsData.series.length; i++) {
        const serData = this.echartsData.series[i]
        option.series.push({
          name: this.echartsData.legend.data[i],
          type: 'line',
          symbol: 'none',
          smooth: true, // 让折线变得顺滑
          itemStyle: {
            color: this.echartsData.colorList[i]
          },
          emphasis: {
            focus: 'series'
          },

          animationDelay: function (idx) {
            return idx * 50
          },
          yAxisIndex: 0,
          data: serData
        })
        if (this.lineArea[i]) {
          option.series[i].areaStyle = {
            show: false,
            color: this.echartsData.colorList[i],
            opacity: 0.1
          }
        }
      }
      // 清除之前图形
      this._chart.clear()
      this._chart.setOption(option)
    },
    resize() {
      setTimeout(() => {
        this._chart.resize()
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped></style>
